import 'package:flutter/material.dart';

class SizeConstraintsRoute extends StatefulWidget {
  const SizeConstraintsRoute({Key? key}) : super(key: key);

  @override
  _SizeConstraintsRoute createState() => _SizeConstraintsRoute();
}

class _SizeConstraintsRoute extends State<SizeConstraintsRoute> {
  Widget redBox = const DecoratedBox(
    decoration: BoxDecoration(color: Colors.red),
  );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('约束'),
          actions: [
            UnconstrainedBox(
              child: const SizedBox(
                width: 20,
                height: 20,
                child: const CircularProgressIndicator(
                  strokeWidth: 2,
                  value: 0.9,
                  valueColor: AlwaysStoppedAnimation(Colors.white10),
                ),
              ),
            )
          ],
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              ConstrainedBox(
                constraints:
                    BoxConstraints(minWidth: double.infinity, minHeight: 50),
                child: SizedBox(
                  height: 50,
                  child: redBox,
                ),
              ),
              SizedBox(
                width: 80,
                height: 80,
                child: redBox,
              ),
              ConstrainedBox(
                  constraints: BoxConstraints(minWidth: 90, minHeight: 20),
                  child: redBox),
              ConstrainedBox(
                constraints:
                    const BoxConstraints(minWidth: 90.0, minHeight: 20.0),
                child: ConstrainedBox(
                  constraints:
                      const BoxConstraints(minWidth: 60.0, minHeight: 60.0),
                  child: redBox,
                ),
              ),
              const SizedBox(
                child: Text('检测内容超出'),
              ),
              UnconstrainedBox(
                alignment: Alignment.topLeft,
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Row(children: [Text('xx' * 30)]),
                ),
              ),
            ]
                .map((e) => Padding(
                      padding: EdgeInsets.only(top: 30),
                      child: e,
                    ))
                .toList(),
          ),
        ));
  }
}
